<template>
    <el-main>
        
      <el-card>
          <h1 style="font-size:30px">挂号记录</h1>
         <el-form :inline="true" :model="recordFrom" class="demo-form-inline">
            <el-form-item label="医生名称">
                <el-input v-model="recordFrom.doctorName" placeholder="医生名称"></el-input>
            </el-form-item>
              <el-form-item label="预约时间">
                        <el-date-picker
                        v-model="data"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit"  icon="el-icon-search">查询</el-button>
                <el-button @click="resetForm('ruleForm')"   icon="el-icon-refresh">重置</el-button>
            </el-form-item>
        </el-form>
      </el-card>  
      <el-card> 
      <el-table :data="pageData.content">
          <el-table-column>
              <el-checkbox></el-checkbox>
        </el-table-column>
        <el-table-column prop="appointmentId" label="预约id">
        </el-table-column>
        <el-table-column prop="appointmentDate" label="预约时间" >
        </el-table-column>
        <el-table-column prop="appointmentMoney" label="挂号金额">
        </el-table-column>
        <el-table-column  label="支付状态">
            <template slot-scope="scope">
                <span>{{scope.row.payStatus== 1 ? '已支付' :'未支付'}}</span>
            </template> 
        </el-table-column>
        <el-table-column label="支付方式" >   
            <template slot-scope="scope">
                <span>{{scope.row.payWay== 1 ? '线下' :'线上'}}</span>
            </template>     
        </el-table-column>
         <el-table-column prop="doctor.doctorName" label="医生姓名" >
        </el-table-column>
         <el-table-column prop="patient.patientName" label="患者姓名" >
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="180">
             <template slot-scope="scope">
                <el-button type="success" size="mini" icon="el-icon-edit"  @click="up(scope.row)">修改</el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="open(scope.row)">删除</el-button>
                </template>
        </el-table-column>
        </el-table> 
             <el-row>
                    <el-col :sapn="12" :offset="6">
                                <el-pagination @size-change="handleSizeChange"    
                                 @current-change="handleCurrentChange"
                                :current-page="pageData.current"    :page-sizes="[2, 4, 6, 8]"    
                                 :page-size="pageData.size"
                                 layout="total, sizes, prev, pager, next, jumper" :total="pageData.total">
                                </el-pagination>     
                 </el-col>
            </el-row> 
      </el-card> 
     <el-dialog title="修改预约记录" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-row>
                                 <el-col span="10">
                                    <el-form-item label="预约id" :label-width="formLabelWidth">
                                       <el-input v-model="form.id" autocomplete="off" disabled="disabled"></el-input>
                                    </el-form-item>
                                 </el-col>
                                 <el-col span="10">
                                     <el-form-item label="支付状态" :label-width="formLabelWidth">
                                    <el-select v-model="form.region" placeholder="请选择支付状态">
                                        <el-option label="已支付" :value="1" ></el-option>
                                        <el-option label="未支付" :value="2"></el-option>
                                    </el-select>
                                    </el-form-item>
                                 </el-col>
                            </el-row>   
                            <el-row>
                                 <el-col span="10">
                                    <el-form-item label="预约时间" :label-width="formLabelWidth" autocomplete="off">
                                         <el-date-picker  
                                            v-model="form.starterDate"
                                            type="date"
                                            placeholder="选择日期">
                                            </el-date-picker>
                                    </el-form-item>
                                 </el-col>
                                 <el-col span="6">
                                      <el-form-item label="挂号金额" :label-width="formLabelWidth">
                                       <el-input v-model="form.money" autocomplete="off" disabled="disabled"></el-input>
                                    </el-form-item>
                                 </el-col>
                            </el-row> 
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="upCheck">确 定</el-button>
                        </div>
     </el-dialog>
    </el-main>
</template>

<style>

</style>

<script>
export default({
     data() {
           return{
                recordFrom:{         
                    doctorName: '',
                    starterDate: '',
                    overDate:'',
                    current:1,
                    size:4,
                    },
                    pageData:{
                            current:1,
                            content:[],
                            total:0,
                            size:4,
                    },
                data:'',
                dialogFormVisible: false,
                form: {
                    id: '',
                    region: '',
                    starterDate: '',
                    money: '',
                },
                formLabelWidth: '120px'
                }
             },
     mounted() {
         this.onSubmit();
            },
     methods:{
            onSubmit(){
            this.recordFrom.current=1;
            this.getDate();
            },
            handleSizeChange(size) {
                    this.recordFrom.size=size
                    this.getDate()
                },
            handleCurrentChange(current) {
                    this.recordFrom.current=current
                     this.getDate()
                },
            getDate(){
                    this.recordFrom.starterDate=this.data[0];
                    this.recordFrom.overDate=this.data[1];
                    this.$axios.post("/api/biz/sub/list",this.recordFrom).then((res)=>{ 
                            if(res.data.code==0){
                                    this.pageData=res.data.data.pageData
                                    this.recordFrom=res.data.data.searchForm
                            }else{
                                   this.$message.error(res.data.msg)
                                }    
                            })
                    },  
              up(row){
                 this.form.id=row.appointmentId
                 this.form.region=row.payStatus
                 this.form.money=row.appointmentMoney
                 this.form.starterDate=row.appointmentDate
                 this.dialogFormVisible = true;   
              },
              upCheck(){
                  this.$axios.post("/api/biz/sub/up",this.form).then((res)=>{ 
                            if(res.data.code==0){
                                   this.getDate();
                            }else{
                                   this.$message.error(res.data.msg)
                                }    
                            })
                   this.dialogFormVisible = false;
              },
              open(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(row.appointmentId);
                 this.$axios.post("/api/biz/sub/del",row.appointmentId).then((res)=>{ 
                            if(res.data.code==0){
                                   this.getDate();
                            }else{
                                   this.$message.error(res.data.msg)
                                }    
                            })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            }
          },
        })
</script>
